<template>
  <div class="searchlist">
    <div class="search_top">
      <!-- childcpn -->
      <headerc>
        <template #left>
          <img src="../../../../static/images/tabbar/back.png" @click="back" />
        </template>
        <template #center>
          <input type="text" id="searchInput" ref="input" />
          <img
            src="../../../../static/images/tabbar/search.png"
            class="search_icon"
          />
        </template>
        <template #right>
          <button id="searchbtn">搜索</button>
        </template>
      </headerc>
    </div>
    <!-- searchNav -->
    <div class="searchNav">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">综合</mt-tab-item>
        <mt-tab-item id="2">新品</mt-tab-item>
        <mt-tab-item id="3">销量</mt-tab-item>
        <mt-tab-item class="priceSort" id="4" @click.native="sort">
          价格 <i></i>
        </mt-tab-item>
      </mt-navbar>

      <!-- tab-container -->
      <mt-tab-container v-model="selected" :swipeable="true">
        <mt-tab-container-item id="1">
          <itemscpn :iteminfo="goodsMsg.goodsinfo"></itemscpn>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <itemscpn :iteminfo="goodsMsg.newgoods"></itemscpn>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <itemscpn :iteminfo="goodsMsg.sales"></itemscpn>
        </mt-tab-container-item>
        <mt-tab-container-item id="4">
          <itemscpn :iteminfo="sortPrice"></itemscpn>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
import headerc from "@/components/header/header";
import itemscpn from "./searchitems";
import { getSerachItem } from "@/request/api.js";
export default {
  components: {
    headerc,
    itemscpn,
  },
  data() {
    return {
      selected: "1",
      goodsMsg: {},
      sortPrice: [],
      flag: false,
    };
  },
  mounted() {
    // 异步请求数据
    getSerachItem().then((res) => {
      this.goodsMsg = res;
      // 将商品追加到新数组里
      for (let i in this.goodsMsg) {
        this.goodsMsg[i].forEach((element, index) => {
          this.sortPrice.push(element);
        });
      }
    });
  },
  methods: {
    // 返回按钮
    back() {
      this.$router.go(-1);
    },
    // 升序
    ascend(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2; //升序,降序为value2 - value1
      };
    },
    // 降序
    descend(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1; //升序,降序为value2 - value1
      };
    },
    // 实现对象数组排序
    sort() {
      // 决定是升序还是降序
      this.flag = !this.flag;
      this.flag
        ? this.sortPrice.sort(this.ascend("price"))
        : this.sortPrice.sort(this.descend("price"));
    },
  },
};
</script>

<style lang="less" >
.searchlist {
  background-color: #f6f6f6;
  .search_top {
    background-color: #fff;
    padding-bottom: 10px;
  }
  .title {
    img {
      width: 42px;
      height: 46px;
    }
  }
  .searchNav {
    .priceSort {
      position: relative;
      i {
        position: absolute;
        margin-left: 10px;
        margin-top: 2px;
        width: 40px;
        height: 40px;
        background: url("../../../../static/images/search/homesear01.png")
          no-repeat;
        background-size: 12px 29px;
      }
    }
    .mint-navbar {
      background-color: #f6f6f6;
      .mint-tab-item-label {
        font-size: 29px;
        line-height: 35px;
      }
      .mint-tab-item.is-selected {
        color: #cc3333ff;
        font-size: 40px;
      }
    }
  }
  #searchInput {
    border: 2px solid #dcdcdc;
  }
}
</style>